<template>
	<div class="fungory">
		<div class="fungory-top">
			<h2>当季目的地</h2>
			<p>你朋友圈的旅行内容,我们包了</p>
			<label>更多</label>
		</div>
		<ul class="fungory-ul">
			<li v-for="item in tabs" :key='item.id' :class="{'default':iscur===item.id}" @click="iscur=item.id">
				{{item.name}}
			</li>
		</ul>
		<FungoryTab1 v-if='iscur===1'></FungoryTab1>
		<FungoryTab2 v-if='iscur===2'></FungoryTab2>
	</div>
</template>

<script>
	import FungoryTab1 from './FungoryTab1.vue'
	import FungoryTab2 from './FungoryTab2.vue'
	export default{
		name:'Fungory',
		components:{
			FungoryTab1,
			FungoryTab2
		},
		data(){
			return{
				tabs:[
					{id:1,name:'国内'},
					{id:2,name:'出境'}
				],
				iscur:1,
			}
		},
	}
</script>

<style scoped>
	.fungory-top{
		width: 100%;
		height: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.fungory-top h2{
		padding-left: 0.2rem;
		font-weight: bold;
		font-size: 0.4rem;
	}
	.fungory-top p{
		position: absolute;
		left: 2.6rem;
		background-color: #fff3ea;
		padding: 0.05rem 0.08rem;
		border-radius: 0.1rem;
		color: #ff9e51;
	}
	.fungory-top label{
		padding-right: 0.3rem;
		font-size: 0.37rem;
	}
	.fungory{
		width: 100%;
		height: 9rem;
	}
	.fungory-ul{
		height: 1.17rem;
		width: 60%;
		display: flex;
		align-items: center;
	}
	.fungory-ul li{
		width: 30%;
		margin: 0 0.1rem;
		text-align: center;
		line-height: 0.8rem;
		font-size: 0.35rem;
		position: relative;
		background-color: #eeeeee;
		border-radius: 0.4rem;
	}
	 .fungory .fungory-ul .default{
		background-color: white;
		color: #e6ac00;
		font-weight: bold;
		font-size: 0.38rem;
	}
</style>
